<template>
  <el-row :class="`obpm-fromContent-title obpm-enterpriseDomain-logo ${listHeaderClass}`">
    <el-col :span="8" class="normalLineH">
      <i :class="`iconfont ${headerArr.iconfont}`" aria-hidden="true"></i>
      <span>{{ headerArr.content }}</span>
    </el-col>
    <el-col :span="16" class="align-right normalLineH">
      <span
        v-for="(item, index) in headerArr.btnArr"
        :key="index"
        class="spanBtn"
      >
        <button_item :btnItemType="item.type ? item.type : 'plain'" :btnItemPlain="item.name=='del'?true:false" :btnDisabled="item.btnDisabled?true:false" :btnItemLabel="item.label" v-show="!item.isShow" @onBtnItemClick="onBtnClick(item.name)" />
      </span>
    </el-col>
  </el-row>
</template>
    <script>
import { delMsg } from "../../utils/elementui";
export default {
  name:'header_item',
  components:{
  },
  data() {
    return {
      listHeaderClass:''
    };
  },
  props: {
    headerArr: {
      default: {},
      type: Object,
    },
    multipleSelection:Array
  },
  created() {
    this.listHeaderClass=this.headerArr.listHeaderClass?this.headerArr.listHeaderClass:'listHeader'
  },
  methods: {
    async onBtnClick(name) {
      if (name == "del" || name =='export') {
        if (name=='export' || this.multipleSelection && this.multipleSelection.length != 0) {
          try {
            await delMsg(
              name=='export'?this.$t("msg_export"):this.$t("msg_confirm_delete"),
              this.$t("msg_tip"),
              this.$t("msg_confirm"),
              this.$t("cancel")
            );
            this.$emit("onBtnClick", name);
          } catch (e) {
            console.log(e);
          }
        } else {
          this.$message({
            showClose: true,
            message: this.$t("one_data_selected"),
            type: "error",
          });
        }
      }  else {
        this.$emit("onBtnClick", name);
      }
    },
  },
};
</script>